{% block sw_cms_element_product_slider %}
<div
    class="sw-cms-el-product-slider"
    :class="classes"
    :style="verticalAlignStyle"
>
    {% block sw_cms_element_product_slider_title %}
    <div
        v-if="element.config.title.value"
        class="sw-cms-el-product-slider__title"
    >
        {{ element.config.title.value }}
    </div>
    {% endblock %}

    {% block sw_cms_element_product_slider_content %}
    <div class="sw-cms-el-product-slider__content">
        {% block sw_cms_element_product_slider_arrow_left %}
        <div
            v-if="hasNavigationArrows"
            class="sw-cms-el-product-slider__navigation is--left-arrow"
            :class="navArrowsClasses"
        >
            <mt-icon
                class="sw-cms-el-product-slider__navigation-button"
                name="regular-chevron-left"
                size="24"
            />
        </div>
        {% endblock %}

        {% block sw_cms_element_product_slider_product_holder %}
        <div
            ref="productHolder"
            class="sw-cms-el-product-slider__product-holder"
            :style="sliderBoxMinWidth"
        >
            <template v-if="!element.data || !element.data.products">
                {% block sw_cms_element_product_slider_demo_data %}
                <sw-cms-el-product-box
                    v-for="index in sliderBoxLimit"
                    :key="index"
                    :element="demoProductElement"
                />
                {% endblock %}
            </template>

            <template v-else>
                {% block sw_cms_element_product_slider_products %}
                <template
                    v-for="(product, index) in element.data.products"
                    :key="index"
                >
                    <sw-cms-el-product-box
                        v-if="index < sliderBoxLimit"
                        :element="getProductEl(product)"
                    />
                </template>
                {% endblock %}
            </template>
        </div>
        {% endblock %}

        {% block sw_cms_element_product_slider_arrow_right %}
        <div
            v-if="hasNavigationArrows"
            class="sw-cms-el-product-slider__navigation is--right-arrow"
            :class="navArrowsClasses"
        >
            <mt-icon
                class="sw-cms-el-product-slider__navigation-button"
                name="regular-chevron-right"
                size="24"
            />
        </div>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
